<template>
	<view v-show="socketMsg.showMsg">
		<movable-area class="msg-container">
			<movable-view 
				class="content"
				:class="[isFadeOut?'fadeOut':'',isFadeIn?'fadeIn':'']"
				@change="change"
				@touchend="touchendEvent"
				@tap="tapEvent"
				direction="horizontal" 
				:out-of-bounds="false" 
				:inertia="true"
				:x="moveX" 
			>
				<view class="msg-wrap" v-if="socketMsg.msgtype=='filled'">
					<view class="title"> 
						<text>消息通知</text>
					</view>
					<view class="msg-content">加注完成，本次共加注 {{socketMsg.data.actualNum}}{{socketMsg.data.units}}，共消费{{socketMsg.data.moneyFill}}元。</view>
					<!-- <view class="time">{{socketMsg.data.finishTime}}</view> -->
					<view class="time">{{socketMsg.data.finishTime}}</view>
				</view> 
				<view class="msg-wrap" v-else>
					<view class="title" :class="[percent==100?'active':'']"> 
						<text>{{percent==100?'加注完成':'加注中'}}</text>
						<image v-show="percent==100" class="icon-duigou" src="/static/index/icon-duigou.png" mode="aspectFill"></image>
					</view>
					<view :class="[percent==100?'':'zwyHeightSec']">
						<u-line-progress  
							height="46" :striped="true"  
							:active-color="[percent==100?'#00aa00':'#2979ff']" 
							:percent="percent"
						></u-line-progress>
					</view>
				</view>
				<view class="close-icon" @tap.stop="$socket.commit('closeMsg',{index:msgIndex})">
					<image src="/static/index/icon-close.png" mode="aspectFill"></image>
				</view>
			</movable-view> 
		</movable-area>
	</view>
</template>

<script>
	
	export default {
		props:{
			socketMsg: {
				type: Object,
				default: function(){
					return {
						msgtype:'filled',
						data: {
							money:"0",
							weight:"0kg"
						}
					}
				}
			},
			msgIndex: {
				type: Number
			}
		},
		data() {
			return {
				moveX:0,
				windowW:375,
				isFadeOut:false,
				isFadeIn:false,
			}
		},
		computed:{
			showMsgBox(){
				return  this.socketMsg.data.showMsg;
			},
			percent() {
				return this.socketMsg.data.percent || 0;
			}
		},
		watch:{
			socketMsg:{
				 immediate: true,
				 handler(newVal) {
					 console.log(newVal);
					 if(newVal.showMsg && newVal) {
						this.isFadeIn = true;
						setTimeout(()=> {
							this.isFadeIn = false;
						},1000)
					}
				 }
			}
			// "socketMsg.data.showMsg":function(newVal){
			// 	console.log(newVal);
			// 	if(newVal) {
			// 		this.isFadeIn = true;
			// 		setTimeout(()=> {
			// 			this.isFadeIn = false;
			// 		},1000)
			// 	}
			// 	console.log(newVal);
			// }	
		},
		created() {
			this.windowW = uni.getSystemInfoSync().windowWidth;
			console.log('windowW',this.windowW);
			this.moveX = this.windowW;
		},
		mounted() {
	
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			tapEvent() {
				uni.navigateTo({
					url:"/pages/fill/did",
					success: () => {
						this.$socket.commit('closeMsg',{index:this.msgIndex});
					}
				})
			},
			change(e) {
				this.scrollX = e.detail.x;
				if(this.scrollX < 100){
					this.isFadeOut = true;
					this.$socket.commit('closeMsg',{index:this.msgIndex});
				}
			},
			touchendEvent(e) {
				this.moveX = this.scrollX;
				if(this.moveX < 100) {
					this.$nextTick(function(){
						this.moveX = 0;
					})
				} else {
					this.$nextTick(function(){
						this.moveX = this.windowW;
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	page{
		overflow: hidden;
	}
	view ,movable-view ,movable-area{
		box-sizing: border-box;
	}
	.msg-container {
		position: relative;
		width: 300vw;	
		min-height: 180rpx;
		margin-left: -100vw; 
		display: flex;
		margin-bottom: 20rpx;
		
		
		.content { 
			position: relative;
			width: calc(100vw - 60rpx);
			margin: 0 30rpx;
			height: 100%;
			background-color: rgba(255,255,255,0.9);
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 0 6rpx 6rpx rgba(0,0,0,0.1);
			
			.msg-wrap {
				width: 580rpx;
				
				.time {
					font-size: 26rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}
			
			.title {
				font-weight: 600;
				font-size: 32rpx;
				margin-bottom: 10rpx;
				color: #666666;
				display: flex;
				align-items: center;
				
				&.active {
					color: #00aa00;
				}
				
				.icon-duigou {
					width: 36rpx;
					height: 36rpx;
					margin-left: 10rpx;
				}
			}
			
			.msg-content {
				line-height: 1.6;
				color: #18B566;
				font-size: 30rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.close-icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
		
	}
	.fadeIn {
		-webkit-animation: fadeIn linear 0.3s both;
	} 
	.fadeOut{
		-webkit-animation: fadeOut linear 0.5s both;
		
	}
	@keyframes fadeIn{
	    0%{
			transform: translateX(0);
			// opacity: 1;
			// transform: scale(0);
		}
		
	    100%{
			// transform: scale(1);
			transform: translateX(100vw);
		}
	}
	@keyframes fadeOut{
	    0%{
			opacity:1;
			transform: translateX(0);
			transform: scale(1);
		}
		
	    100%{
			opacity:0;
			transform: scale(0);
			transform: translateX(-100%);
		}
	}
	
	@keyframes zwyHeightSec {
		100% {
			background-position: right -40px top 0px;
		}
	}
	
	.zwyHeightSec {
		position: relative;
		overflow: hidden;
	}
	
	.zwyHeightSec::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
		background-size: 40px 100%;
		background-repeat: no-repeat;
		background-position: left -40px top 0;
		animation: zwyHeightSec 1s ease infinite;
		z-index: 999;
	}
</style>
